<template>
	<view class="content" style="height: 100%;background-color: #EFF1F2;">
		<BaseNavBar title="发布订单" />
		<view class="page-content">
			<!-- 项目名称 -->
			<view class="item-wrap">
				<view class="input-item">
					<view class="label">项目名称：</view>
					<input type="text" placeholder="请输入项目名称">
				</view>
				<view class="input-item">
					<view class="ipt-infor">上海市长宁区中山西路1265弄28号-3栋</view>
					<view class="change-btn">修改地址</view>
				</view>
				<view class="input-item">
					<view class="label">详细地址：</view>
					<input type="text" placeholder="请输入详细地址" value="项目名称项称项目名称">
				</view>
			</view>
			<!-- 下单人 -->
			<view class="item-wrap">
				<view class="flex-wrap">
					<image src="/static/logo.png" class="avatar"></image>
					<view style="flex: 1;padding: 0 25px;">
						<view class="flex-wrap">
							<view class="label">下单人：</view>
							<view style="flex: 1;">张三李四王麻子</view>
						</view>
						<view class="flex-wrap">
							<view class="label">联系电话：</view>
							<view style="flex: 1;">13312341234</view>
						</view>
						<view class="flex-wrap">
							<view class="label">身份：</view>
							<view style="flex: 1;">安装师傅</view>
						</view>
					</view>
					<view class="check-btn">查看评价</view>
				</view>
				<!-- line -->
				<view style="height: 1px;background-color: #ebebeb;margin: 12px 0;"></view>
				<view class="flex-wrap">
					<view class="add-btn">
						<image src="/static/icons/add-icon.png" class="ico"></image>
						<view class="btn-name">添加订单</view>
					</view>
					<swiper class="swiper" display-multiple-items='3'>
						<swiper-item class="swiper-item">
							<view class="item current">
								<image src="/static/icons/tool-icon.png" class="ico"></image>
								<view class="btn-name">添加订单</view>
								<view class="status status1">已完成</view>
							</view>

						</swiper-item>
						<swiper-item class="swiper-item">
							<view class="item">
								<image src="/static/icons/tool-icon.png" class="ico"></image>
								<view class="btn-name">添加订单</view>
								<view class="status status2">已取消</view>
							</view>
						</swiper-item>
						<swiper-item class="swiper-item">
							<view class="item">
								<image src="/static/icons/tool-icon.png" class="ico"></image>
								<view class="btn-name">添加订单</view>
								<view class="status status2">等待报价</view>
							</view>
						</swiper-item>
						<swiper-item class="swiper-item">
							<view class="item">
								<image src="/static/icons/tool-icon.png" class="ico"></image>
								<view class="btn-name">添加订单</view>
								<view class="status status2">等待报价</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 接单人 -->
			<view class="item-wrap">
				<!-- name -->
				<view class="top-wrap">
					<view class="top-r-btn">更换接单人</view>
				</view>
				<view class="flex-wrap">
					<image src="/static/logo.png" class="avatar"></image>
					<view style="flex: 1;padding: 0 25px;">
						<!-- item -->
						<view class="flex-wrap">
							<view class="label">接单人：</view>
							<view style="flex: 1;">张三李四王麻子</view>
						</view>
						<!-- item -->
						<view class="flex-wrap">
							<view class="label">联系电话：</view>
							<view style="flex: 1;">13312341234</view>
						</view>
						<!-- item -->
						<view class="flex-wrap">
							<view class="label">身份：</view>
							<view style="flex: 1;">安装师傅</view>
						</view>
					</view>
					<view class="check-btn">查看评价</view>
				</view>
			</view>
			<!-- 材料 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">材料</view>
					<image src="/static/arrow-mid-right.png" style="width: 14px;height: 14px" mode="aspectFit"></image>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="meter-item" v-for="i in 16" :key="index">铝塑板</view>
				</view>
			</view>
			<!-- 需要工具 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">需要工具</view>
					<image src="/static/arrow-mid-right.png" style="width: 14px;height: 14px" mode="aspectFit"></image>
				</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view class="meter-item" v-for="i in 16" :key="index">铝塑板</view>
				</view>
			</view>
			<!-- 色卡 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">色卡</view>
					<image src="/static/arrow-mid-right.png" style="width: 14px;height: 14px" mode="aspectFit"></image>
				</view>
				<view class="color-wrap">
					<view class="color-item" v-for="(item, index) in colorList" :key="index">
						<view class="item" :style="{background:item.color}"></view>
						<text class="">{{item.name}}</text>
					</view>
				</view>
			</view>
			<!-- 添加备注与照片 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">添加备注与照片4/6</view>
					<view class="top-r-btn">一键加载</view>
				</view>
				<view class="pic-wrap">
					<view class="pic-item" v-for="i in 6" :key="index">
						<image src="/static/logo.png" style="width: 98px;height: 98px;border-radius: 8px;"
							mode="aspectFit" />
						<view class="pic-name">效果图</view>
					</view>
				</view>
				<!-- input -->
				<view class="textarea-wrap">
					<textarea type="text" value="" style="font-size: 12px;height: 100%;" placeholder="请输入备注..."
						maxlength="-1" />
				</view>
			</view>
			<!-- 时间约定方式 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">时间约定方式：</view>
					<picker mode="date" @change="onDateChange" :value="date">
						<view class="date-picker">时间约定方式</view>
					</picker>
				</view>
				<view class="choose-time">
					<view class="time-col">
						<view class="">日期：</view>
						<view class="ipt">{{date}}</view>
					</view>
					<view class="time-col flex-two">
						<view class="flex">
							<text>开始时间</text>
							<view class="flex1">
								<picker mode="time" :value="start_time" :start="start_time" :end="end_time"
									@change="bindDateChange">
									<view class="date">{{start_time}}</view>
								</picker>
							</view>
						</view>
						<view class="flex">
							<text>结束时间</text>
							<view class="flex1">
								<picker mode="time" :value="end_time" :start="start_time" :end="end_time"
									@change="bindDateChange2">
									<view class="date">{{end_time}}</view>
								</picker>
							</view>
						</view>

					</view>
				</view>

			</view>
			<!-- 上传附件 -->
			<view class="item-wrap">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">上传附件</view>
					<view style="font-size: 11px;color: #666666;">添加</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="title">其他功能</view>
				</view>
				<view style="margin-top: 12px;">
					<view style="display: flex;align-items: center;justify-content: center;margin-bottom: 12px;">
						<view
							style="font-size: 13px;color: #ffffff;padding: 10px 34px;background: linear-gradient(to right,#06C5EA,#2456E0);border-radius: 20px;margin-right: 30px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
						<view
							style="font-size: 13px;color: #ffffff;padding: 10px 34px;background: linear-gradient(to right,#06C5EA,#2456E0);border-radius: 20px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
					</view>

					<view style="display: flex;align-items: center;justify-content: center;margin-bottom: 12px;">
						<view
							style="font-size: 13px;color: #2B5BEF;padding: 10px 34px;background: linear-gradient(to right,#F6F8FD,#E0EBFF);border-radius: 20px;margin-right: 30px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
						<view
							style="font-size: 13px;color: #2B5BEF;padding: 10px 34px;background: linear-gradient(to right,#F6F8FD,#E0EBFF);border-radius: 20px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
					</view>

					<view style="display: flex;align-items: center;justify-content: center;margin-bottom: 12px;">
						<view
							style="font-size: 13px;color: #2B5BEF;padding: 10px 34px;background: linear-gradient(to right,#F6F8FD,#E0EBFF);border-radius: 20px;margin-right: 30px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
						<view
							style="font-size: 13px;color: #2B5BEF;padding: 10px 34px;background: linear-gradient(to right,#F6F8FD,#E0EBFF);border-radius: 20px;box-shadow: 0 2px 6px 1px #0A19421A;">
							暂存订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorList: [{
					color: '#E82508',
					name: '红色'
				}, {
					color: '#000000',
					name: '黑色'
				}, {
					color: '#2456E0',
					name: '蓝色'
				}, {
					color: '#FFE600',
					name: '黄色'
				}],
				date: '时间约定方式',
				start_time: '8:00',
				end_time: '20:00',
			}
		},
		methods: {
			// 选择日期
			onDateChange: function(e) {
				this.date = e.detail.value;
			},
			// 选择时间开始
			bindDateChange: function(e) {
				this.start_time = e.target.value

			},
			bindDateChange2: function(e) {
				this.end_time = e.target.value;
			},

			// 选择时间结束
		}
	}
</script>

<style>
	.page-content {
		overflow-y: scroll;
	}

	.item-wrap {
		background-color: #ffffff;
		margin-bottom: 8px;
		border-radius: 8px;
		padding: 10px 25px;
	}

	.label {
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

	.flex-wrap {
		display: flex;
		align-items: center;
		line-height: 26px;
	}

	.top-wrap {
		display: flex;
	}

	.top-r-btn {
		margin-left: auto;
		display: inline-block;
		background-color: #F6F6F8;
		border-radius: 3px;
		height: 25px;
		line-height: 25px;
		color: #2456E0;
		text-align: center;
		padding: 0 10px;
	}

	.input-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F3F3F3;
		padding: 10px 0;
	}

	.change-btn {
		font-size: 14px;
		font-weight: bold;
		color: #2B5BEF;
	}

	.ipt-infor {
		flex: 1;
		font-size: 12px;
		color: #666666;
	}

	.avatar {
		width: 54px;
		height: 54px;
		border-radius: 27px;
	}

	.ico {
		display: block;
		width: 25px;
		height: 25px;
	}

	.check-btn {
		font-size: 14px;
		font-weight: bold;
		color: #2B5BEF;
	}

	.add-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: auto;
	}

	.btn-name {
		font-size: 12px;
		color: #2456E0;
		margin-top: 8px;
	}

	.swiper {
		height: 95px;
		flex: 1;
		padding: 0 20px;
		line-height: 1;
	}

	.swiper-item .item {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 66px;
		height: 90px;
		padding: 14px 0;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.swiper-item .item.current {
		background: #F6F9FF;
		box-shadow: 0px 3px 6px 1px rgba(36, 86, 224, 0.14);
		border-radius: 7px 7px 7px 7px;
	}

	.item .status {
		margin-top: 5px;
	}

	.status1 {
		color: #4EBC5E;
	}

	.status2 {
		color: #B8B8B8;
	}

	.item-wrap .title {
		color: #000;
		font-size: 16px;
		font-weight: bold;
	}

	.meter-item {
		font-size: 12px;
		color: #2456E0;
		padding: 3px 7px;
		border: 1px solid #2456E0;
		border-radius: 4px;
		margin-top: 12px;
		margin-right: 12px;
	}

	.textarea-wrap {
		height: 90px;
		border: 1px solid #D4D4D4;
		margin-top: 12px;
		padding: 12px;
		border-radius: 8px;
	}

	.pic-wrap {
		display: flex;
		margin-top: 12px;
		flex-wrap: wrap;
	}

	.pic-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 13px;
		width: 33.33%;
	}

	.pic-name {
		color: #B8B8B8;
		font-size: 12px;
		margin-top: 5px;
	}

	.color-wrap {
		display: flex;
		text-align: center;
		margin-top: 10px;
	}

	.color-item {
		margin-right: 23px;
	}

	.color-item .item {
		width: 52px;
		height: 23px;
		border-radius: 4px;
		margin-bottom: 3px;
	}

	.choose-time .time-col {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.time-col .ipt {
		border: 1px solid #D4D4D4;
		border-radius: 8px;
		padding: 3px 10px;
	}
</style>